<div ng-controller="Camel.BrowseEndpointController">
  <div ng-hide="isJmxTab">
    <ng-include src="'app/camel/html/breadcrumbBar.html'"></ng-include>
  </div>
  <div ng-class="{'wiki-fixed' : !isJmxTab}">
    <div class="row-fluid">
      <div class="span6">
        <input class="search-query span12" type="text" ng-model="gridOptions.filterOptions.filterText"
               placeholder="Filter messages">
      </div>
      <div class="span6">
        <div class="pull-right">
          <form class="form-inline">
            <button class="btn" ng-disabled="!gridOptions.selectedItems.length" ng-click="forwardDialog.open()"
                    hawtio-show object-name="{{workspace.selection.objectName}}" method-name="sendBodyAndHeaders"
                    title="Forward the selected messages to another endpoint" data-placement="bottom">
              <i class="icon-forward"></i> Forward
            </button>
            <button class="btn" ng-click="refresh()"
                    title="Refreshes the list of messages">
              <i class="icon-refresh"></i>
            </button>
          </form>
        </div>
      </div>
    </div>


    <div class="row-fluid">
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>
    
    <div ng-class="hide">
      <p id="message_body">{{row.body}}</p>
    </div>

    <div hawtio-slideout="showMessageDetails" title="{{row.id}}">
      <div class="dialog-body">

        <div class="row-fluid">
          <div class="pull-right">
            <form class="form-horizontal no-bottom-margin">
              <div class="btn-group" hawtio-pager="messages" on-index-change="selectRowIndex"
                   row-index="rowIndex"></div>
              <button class="btn" ng-disabled="!gridOptions.selectedItems.length" ng-click="forwardDialog.open()"
                      hawtio-show object-name="{{workspace.selection.objectName}}" method-name="sendBodyAndHeaders"
                      title="Forward the selected messages to another endpoint" data-placement="bottom">
                <i class="icon-forward"></i> Forward
              </button>
              <button class="btn"
                      zero-clipboard
                      data-clipboard-target="message_body"
                      title="Click to copy the message body to the clipboard">
                <i class="icon-copy"></i> Copy
              </button>
              <button class="btn" ng-click="showMessageDetails = !showMessageDetails" title="Close this dialog">
                <i class="icon-remove"></i> Close
              </button>
            </form>
          </div>
        </div>

        <div class="row-fluid">
          <div class="expandable closed">
            <div title="Headers" class="title">
              <i class="expandable-indicator"></i> Headers
            </div>
            <div class="expandable-body well">
              <table class="table table-condensed table-striped">
                <thead>
                <tr>
                  <th>Header</th>
                  <th>Value</th>
                </tr>
                </thead>
                <tbody ng-bind-html-unsafe="row.headerHtml">
                </tbody>
              </table>
            </div>
          </div>

          <div class="row-fluid">
            <div hawtio-editor="row.body" read-only="true" mode="mode"></div>                
          </div>
        </div>

      </div>
    </div>
  </div>

  <div modal="forwardDialog.show" close="forwardDialog.close()" options="forwardDialog.options">
    <form class="form-horizontal no-bottom-margin" ng-submit="forwardDialog.close()">
      <div class="modal-header">
        <h4>Forward
          <ng-pluralize count="selectedItems.length"
                        when="{'1': 'a message', 'other': 'messages'}"></ng-pluralize>
        </h4>
      </div>
      <div class="modal-body">
        <p>Forward
          <ng-pluralize count="selectedItems.length"
                        when="{'1': 'a message', 'other': '{} messages'}"></ng-pluralize>
          to: <input type="text" style="width: 100%" ng-model="endpointUri" placeholder="Endpoint URI"
                     typeahead="title for title in endpointUris() | filter:$viewValue" typeahead-editable='true'></p>
      </div>
      <div class="modal-footer">
        <input id="submit" class="btn btn-primary add" type="submit" ng-click="forwardMessagesAndCloseForwardDialog()"
               value="Forward">
        <button class="btn btn-warning cancel" type="button" ng-click="forwardDialog.close()">Cancel</button>
      </div>
    </form>
  </div>
</div>
